<template>
  <div class="custom user flex">
    <img
      :src="messageItem.avatar"
      alt=""
      class="w100px h100px cursor-pointer rd"
      @click="openUserDetail(messageItem.userId)"
    />
    <main class="ml3">
      <div>
        <span class="font-bold font-size-4">{{ messageItem.nickname }}</span>
        <small class="ml2 bg-green rd-4 pl1 pr1 color-white">{{ messageItem.userId }}</small>
      </div>
      <div class="mt2 mb2">{{ messageItem.sex }}</div>
      <div>{{ messageItem.innerMonologue }}</div>
    </main>
  </div>

  <!-- 推送用户详情弹窗：查看 -->
  <UserDetail ref="formRefUserDetail" />
</template>

<script lang="ts" setup>
import UserDetail from '@/views/blind/member/Detail.vue'

interface CustomMessageUser {
  businessID?: string
  userId?: number
  avatar?: string
  nickname?: string
  sex?: string
  innerMonologue?: string
}
const { messageItem } = defineProps<{ messageItem: CustomMessageUser }>()

/** 打开用户详情 */
const formRefUserDetail = ref()
const openUserDetail = (id?: number) => {
  formRefUserDetail.value.open(id)
}
</script>
